<template>
  <div class="three-figures">
    <div class="book-item">
      <router-link
        tag="div"
        class="item"
        v-for="(item, index) in fictionlist"
        :key="index"
        :to="'/noveldetail?id=' + item.id"
      >
        <div class="item-img">
          <img :src="item.fictionImg" alt="" />
        </div>
        <span class="item-title">{{ item.titleName }}</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getFictionApi } from "../api/novelmain.js";

export default {
  data() {
    return {
      fiction: null,
      fictionlist: [],
    };
  },
  methods: {
    getFictionApiFun() {
      getFictionApi({ id: this.$route.query.id }).then((data) => {
        let index = data.fiction.findIndex(
          (item) => item.id == this.$route.query.id
        );
        this.fiction = data.fiction[index];
        console.log(this.fiction);
      });
    },
  },
  created() {
    // console.log(this.$route.query);
    if ("id" in this.$route.query) {
      this.getFictionApiFun();
    }
  },
  mounted() {
    getFictionApi().then((data) => {
      // this.fiction = data.fiction;

      // 页面一加载的时候先出来三个对象的内容
      for (var i = 6; i < data.fiction.length; i++) {
        if (i < 10) {
          this.fictionlist.push(data.fiction[i]);
        }
      }
    });
  },
};
</script>

<style lang="scss" scoped>
</style>